﻿<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject">Prime NG Autocomplete</span>
        </div>
    </div>
    <div class="portlet-body">

        <form role="form">

            <div class="form-group form-md-line-input form-md-floating-label edited row">
                <label class="col-md-2 control-label">Single select</label>
                <div class="col-md-10">
                    <div class="input-group">
                        <div class="input-group-control ui-fluid">

                            <p-autoComplete [(ngModel)]="country"
                                            [suggestions]="filteredCountries"
                                            (completeMethod)="filterCountries($event)"
                                            field="name"
                                            placeholder="Country"
                                            [minLength]="1"
                                            name="SingleSelectInput"
                                            inputStyleClass="form-control">
                            </p-autoComplete>
                        </div>
                        <span class="input-group-btn btn-right">
                            <button class="btn green-haze" (click)="submitSelectedCountry()" type="button">{{l("Submit")}}</button>
                        </span>
                    </div>
                </div>
            </div>
                
            <div class="form-group form-md-line-input form-md-floating-label edited row">
                <label class="col-md-2 control-label">Multi select</label>
                <div class="col-md-10">
                    <div class="input-group">
                        <div class="input-group-control ui-fluid">

                            <p-autoComplete [(ngModel)]="countries"
                                            [suggestions]="filteredCountries"
                                            (completeMethod)="filterCountries($event)"
                                            field="name"
                                            placeholder="Countries"
                                            [minLength]="1"
                                            name="MultiSelectInput"
                                            [multiple]="true">
                            </p-autoComplete>
                        </div>
                        <span class="input-group-btn btn-right">
                            <button class="btn green-haze" (click)="submitSelectedCountries()" type="button">{{l("Submit")}}</button>
                        </span>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>